{include file='public/header'}
<style>
    .set1_section1{
        border-bottom: 1px solid #eee;
        margin-top: 45px;
    }
    .set1_section1 ul li{
        float: left;
        width: 25%;
        text-align: center;
        border-bottom: 2px solid #fff;
        padding: 10px 0px;
    }
    .set1_section1 ul li a{
        color: #000;
        font-size: 1rem;
    }
    .set1_section1 ul li.select{
        border-color: #ff4546;
    }
    .set1_section1 ul li.select a{
        color: #ff4546;
    }
    .set1_section2{
        padding: 10px 0px;
    }
    .set1_section2 .t1{
        border-bottom: 1px solid #ddd;
    }
    .set1_section2 .f1{
        padding: 17px 10px;
        position: relative;
        border-radius: 5px;
        margin: 8px 0px;
    }
    .set1_section2 .f1 .st{
        font-size: 0.85rem;
        position: absolute;
        right: 10px;
        top: -5px;
        color: #04ab02;
    }
    .set1_section2 .f1 .st_name{
        font-size: 0.85rem;
        position: absolute;
        left: 10px;
        top: -5px;
        color: #04ab02;
    }
    .set1_section2 .f1 .sy{
        font-size: 0.85rem;
        position: absolute;
        right: 10px;
        top: -5px;
        color: red;
    }
    .set1_section2 .f1 .r1 .s1{
        color: #666;
        float: left;
        font-size: 0.95rem;
    }
    .set1_section2 .f1 .r1{
        padding: 3px 0px;
    }
    .set1_section2 .f1 .r1 .s2{
        color: #666;
        float: right;
        font-size: 0.95rem;
    }
    .set1_section2 .f1 .r2{
        padding: 5px 0px;
        padding-bottom: 0px
    }
    .set1_section2 .f1 .r2 .p1{
        color: #000;
        text-align: right;
        font-size: 0.9rem;
    }
    .set1_section2 .f1 .r2 .p1 .s1{
        font-weight: bold;
    }
</style>
<body>
    <div class="sectionY">
        <a href="javascript:history.back();">
            <img src="__PUBLIC__/home/images/a19.png" alt="" class="a1">
        </a>
        <p class="p1">分销订单</p>
    </div>
    <div class="set1_section1">
        <ul class="clearfix">
            <li class="select" data-type="0">
                <a href="javascript:;">所有</a>
            </li>
            <li data-type="1">
                <a href="javascript:;">待付款</a>
            </li>
            <li data-type="2">
                <a href="javascript:;">已付款</a>
            </li>
            <li data-type="3">
                <a href="javascript:;">已完成</a>
            </li>
        </ul>
    </div>
    <div class="set1_section2 ulData">
    </div>
    <div style="line-height: 25px; text-align: center; color: #868686;" onclick="loadData()" class="more">
        <span style="width: 100%;">--点击查看更多--</span>
    </div>
</body>

<script type="text/javascript">
    $(function(){
        $(".set1_section1 li").click(function(){
            $(this).addClass("select").siblings().removeClass("select");
            var type = $(this).data("type");
            query.type=type;
            query.page=1;
            is_end=false;
            loadData();
        })
        loadData();
    })
    var query={
        page:1,
        page_num:20,
        type:0
    },is_end=false;
    //加载数据
    function loadData() {
        if(is_end){
            return;
        }
        let index = modal.loading();
        $.post("{:url('commissionOrder')}", query, function (res) {
            if(query.page==1){
                $(".ulData").html("");
            }
            query.page++;
            modal.close(index);
            modal.msg(res.result_info);
            let data = res.result_data;
            if(res.result_code==0){
                let _li = '';
                $.each(data, function (i,v) {
                    _li += '<div class="t1">\n' +
                        '            <div class="f1">\n' +
                        '                <span class="st_name">'+v.nick_name+'</span>\n' +
                        '                <span class="st">'+v.order_str+'</span>\n' +
                        '                <div class="r1 clearfix">\n' +
                        '                    <span class="s1">分销等级：</span>\n' +
                        '                    <span class="s2">'+v.c_rank+'</span>\n' +
                        '                </div>\n' +
                        '                <div class="r1 clearfix">\n' +
                        '                    <span class="s1">订单号：</span>\n' +
                        '                    <span class="s2">'+v.order_sn+'</span>\n' +
                        '                </div>\n' +
                        '                <div class="r1 clearfix">\n' +
                        '                    <span class="s1">下单时间：</span>\n' +
                        '                    <span class="s2">'+v.create_time+'</span>\n' +
                        '                </div>\n' +
                        '                <div class="r2">\n' +
                        '                    <p class="p1">预计佣金：<span class="s3">+'+v.commission+'</span></p>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '        </div>';
                })
                $(".ulData").append(_li);
            }
            if(data.length<query.page_num){
                $(".more").find("span").text("--我是有底线的--");
                is_end=true;
            }
        });
    }
</script>
</html>